@charset 'utf-8';

@mixin img(){
    width: 100%;
    height: 100%;
}
#web{
    min-width: 1181px;
}

header{
    .tel{
        img{
            width: 100% !important;
            height: 72px !important;
        }
    }
    .lo{
    p{
        height: 33px !important;
    }
}
}
section{
        width: 100%;
        background: linear-gradient(to bottom,#04060e 20%,#363e4e);
        aside{
            width: 100%;
            overflow: hidden;
            ul{
                width: 574px;
                height: 34px;
                background: #f0f0f0;
                margin: 10px auto 88px;
                border-radius: 17px;
            li{
                float: left;
                width: 169px;
                height: 34px;
                background: #f0f0f0;
                border-radius:17px;
                cursor: pointer;
                text-align: center;
                position: relative;
                z-index: 1;
                transition: 200ms;
                transform: scale(1);
                span{
                    a{
                         font-size: 14px;
                         color: #878787;
                         line-height: 34px;
                         &:hover{
                             text-decoration: none;
                         }
                    }
                }
                .small{
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    background: #f0f0f0;
                    position: absolute;
                    top: 14px;
                    left: 12px;
                }
                &:hover,&.active{
                    transition: 200ms;
                    z-index: 999;
                     background: #eb413d;
                     transform: scale(1.1) translateY(-3px);
                     a{
                         color: white;
                     }
                     .small{
                         background: white;
                     }
                }
            }
            li+li{
                margin-left: -34px;
            }
         }
    }
    article{
        #color{
            display: none;
        }
        #part{
            display: block;
        }
        .madefor,.madeColor{
            width: 280px;
            height: 600px;
            background: #3f4652;
            border-radius: 12px;
            text-align: center;
            margin-left: 60px;
            margin-bottom: 60px;
            .input{
                width: 100%;
                height: 42px;
                 border-radius: 12px;
                background:#efefef ;
                input{
                    border-radius: 6px 6px 0 0;
                    width: 140px;
                    height: 42px;
                    background: #efefef;
                    font-size: 14px;
                    color: #444f58;
                    line-height: 42px;
                    &.active,&:hover{
                        background: #3f4652;
                        color: white;
                    }
                }
            }
            .list{
                p{
                   font-size: 14px;
                   color: white; 
                   line-height: 58px;
                   text-align: left;
                   padding-left: 38px;
                }
                .list-ul{
                    margin-left: 10px;
                    height: 478px;
                    overflow: hidden;
                    li{
                        width: 232px;
                        height: 54px;
                        border-radius: 24px;
                        background: #323842;
                        margin-bottom: 12px;
                        font-size: 15px;
                        color: white;
                        line-height: 54px;
                        text-align: left ;
                        text-indent: 27px;
                        cursor: pointer;
                        &.active,&:hover{
                            background: #575c64;
                        }
                    }
                }
            }
            .scroll{
                    width: 6px;
                    height: 478px;
                    margin-left: 12px;
                    background: #3f4652;
                    .scroll-now{
                        width: 6px;
                        height: 246px;
                        background: #535c6c;
                        border-radius: 24px;
                        cursor: pointer;
                    }
                }
        }
        .madeColor{
            width: 336px;
            margin-left: 13px;
            .madecolor{
                width: 336px;
                height: 252px;
                background: url(../img/custom/bgg.png);
                border-radius: 12px 12px 0 0;
                position: relative;
                img{
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                }
            }
            p{
                font-size: 14px;
                color: white;
                text-align: left;
                padding-left: 16px;
                padding-top: 16px;
            }
            .input{
                    height: 36px;
                    border-radius: 0;
                div{
                    position: relative;
                    width: 112px;
                    img{
                        display: inline-block;
                        position: absolute;
                        left: 34px;
                        top: 11px;
                    }
                    input[type='button']{
                     width: 112px;
                     height: 36px;
                     line-height: 36px;
                     text-align: left;
                     text-indent: 57px;
                    }
                }
                
            }
            .scroll{
                height: 280px;
                margin-top: 20px;
                .scroll-now{
                    height: 125px !important;
                }
            }
            .textColor{
                div{
                    margin-left: 16px;
                }
                li:nth-of-type(1){
                    div{
                            position: relative;
                            width: 280px;
                            height: 36px;
                            border-radius: 4px;
                       input[type='text']{
                           border-radius: 4px;
                            @include img();
                            background: white;
                            border: none;
                            font-size: 14px;
                            color: #99999a;
                            text-indent: 11px;
                        }
                        input[type='button']{
                            width: 55px;
                            height: 30px;
                            background: #eb413d;
                            color: white;
                            font-size: 14px;
                            border-radius: 4px;
                            position: absolute;
                            right: 4px;
                            top: 4px;
                        }
                    }
                   
                }
                li:nth-of-type(2){
                    button{
                        width: 280px;
                        height: 36px;
                        text-align: left;
                        text-indent: 8px;
                        position: relative;
                        span{
                            position: absolute;
                            right: 10px;
                            top: 14px;
                        }
                    }
                    ul{
                        width: 280px;
                    }
                }
            }
        } 
        .modelfor{
            margin-left: 160px;
            text-align: center;
            div:nth-of-type(1){
                width:332px ;
                height: 368px;
                overflow: hidden;
                img{
                    @include img();
                }
               
            }
            div:nth-of-type(2){
                width:332px ;
                height: 102px;
                overflow: hidden;
                img{
                    @include img();
                }
            }
            input[type='button']{
                width: 174px;
                height: 48px;
                background: transparent;
                border: 1px solid white;
                color: white;
                border-radius: 22px;
                margin-top: 30px;
                font-size: 14px;
                &:hover{
                    border-color: #eb413d;
                    background:#eb413d ;
                }
            }
        }   
    }
}
      .productCar{
        width: 100% !important;
        min-width: 1100px;
        text-align: center;
             .pro-title{
            margin-top: 62px;
            margin-bottom: 23px;
            h4{
                font-size: 20px;
                color: #444f58;
                line-height: 32px;
            }
            span{
                display: block;
                width: 25px;
                height: 3px;
                background:#eb413d ;
                margin: 10px auto 0;
            }
        }
        .product-shopCar{
            width: 100%;
            height: 140px;
            margin-bottom:58px;
            .left,.right{
                width: 10%;
              position: relative;
                 top: 40px;
            }
            .moveul{ 
                width: 80%;
                height: 140px;
                overflow: hidden;
                position: relative;
                }
            .pro-shop1{
                 position: absolute;
                 left: 0;
                li{
                    height: 140px;
                    border-right:1px solid #e5e5e5;
                    float: left;
                    &:nth-child(4n){
                        border-right: none;
                    }
                    div{
                        width: 50%;
                        height: 120px;
                        overflow: hidden;
                    }
                    div:nth-of-type(2){
                        img{
                            margin: 0;
                        }
                    }
                    p{
                        font-size: 14px;
                        color: #444f58;
                        padding-bottom: 22px;
                        text-align:left; 
                        white-space:nowrap ;
                        margin-bottom: 0;
                        text-overflow:ellipsis;
                        overflow:  hidden;
                        &:nth-of-type(1){
                            margin-top: 30px;
                        }
                        &:nth-of-type(2){
                            font-size: 14.91px !important;
                            padding-top: 9px;
                        }
                    }
                    img{
                        display: block;
                        margin: 0 auto;
                    }
                }
                }
        }
    }  
footer{
    
     .list .foot-list{
        width: 449px;
        height: 96px;
    } 
    a:hover{
        text-decoration: none;
    }
}
